<template>
	<view class="loginPage">
		<view style="margin-top: 30upx;" class="flex flex-direction align-center">
			<!-- <view class="passwordBox flex align-center justify-between">
				<input  type="text" style="border: none;" placeholder="请输入图形验证码" v-model="imgcode" placeholder-style="color:#999" />
				<image mode="aspectFit" class="codeImg" :src="$api.code.image+'&id='+id" @click="getImg"></image>
			</view> -->
			<view class="inputTitle">短信验证码</view>
			<view class="passwordBox flex align-center justify-between">
				<input  type="text" style="border: none;" :disabled="islogin" placeholder="请输入手机号码" v-model="mobile" placeholder-style="color:#999" />
				<view class="codeBtn" @click="postCode">{{codeTime == 0?'获取验证码':codeTime+'s'}}</view>
			</view>
			<input class="passwordBox" style="margin-top: 20upx;" placeholder="请输入短信验证码" v-model="code" placeholder-style="color:#999" />
			<!-- <view class="inputTitle">旧密码</view>
			<input class="passwordBox" type="password" placeholder="新密码" v-model="oldPasswd" placeholder-style="color:#999" /> -->
			<view class="inputTitle">新密码</view>
			<input class="passwordBox" type="password" placeholder="新密码" v-model="newPasswd" placeholder-style="color:#999" />
			<passlevel :level="level"></passlevel> 
			<view class="inputTitle">确认新密码</view>
			<input class="passwordBox" type="password" placeholder="确认新密码" v-model="newPasswd2" placeholder-style="color:#999" />
			<view class="loginBtn totop1" @click="saveReset">重置密码</view>
		</view>
		
	</view>
</template>

<script>
	import {
		post,
		get,
		checkpass
	} from "@/utils/post.js";
	import passlevel from './passlevel'
	export default {
		components:{
			passlevel
		},
		data() {
			return {
				mobile:'',
				newPasswd: '',
				newPasswd2: '',
				oldPasswd:'',
				code: '',
				type:'',
				codeTime:0,
				pagename:'',
				name:'',
				cw:'',
				islogin:false,
				imgcode:'',
				src:'',
				yzcode:'',
				id:0
			}
		},
		onLoad(op) {
			this.type = op.type
			if(op.login){
				this.islogin = true
			}
			this.getImg()
		},
		onUnload(){
			clearInterval(this.timer)
		},
		computed:{
			level(){
				return checkpass(this.newPasswd)
			}
		},
		methods: {
			getImg(){
				this.id ++
			},
			postCode() {
				if (this.codeTime > 0) {
					return
				}
				if(!this.mobile){
					this.$showM('请输入手机号码',false)
				}
				var data = {
					mobile:this.mobile
				}
				this.$sloading()
				this.$request({
					url: this.$api.phone.code,
					method:'get',
					data: data
				}).then(info => {
					this.$hloading()
					if (info.code == 0) {
						this.codeTime = 60
						this.timer = setInterval(() => {
							this.codeTime--
							if (this.codeTime == 0) {
								clearInterval(this.timer)
							}
						}, 1000)
					}
				}).catch(info => {
					this.$hloading()
				})
			},
			saveReset() {
				// if (!this.imgcode) {
				// 	this.$showM('请输入答案', false)
				// 	return
				// }
				if (!this.mobile) {
					this.$showM('请输入手机号', false)
					return
				}
				if (!this.code) {
					this.$showM('请输入验证码', false)
					return
				}
				if (!this.newPasswd) {
					this.$showM('请输入新密码', false)
					return
				}
				if (this.newPasswd != this.newPasswd2) {
					this.$showM('两次新密码不一样', false)
					return
				}
				var data = {
					password: this.newPasswd,
					phone:this.mobile,
					vcode:this.code
				}
				this.$sloading()
				this.$request({
					url: this.$api.code.edit_pass,
					method:'post',
					data: data
				}).then(info => {
					this.$hloading()
					if (info.code == 0) {
						this.$showM('修改成功',false,res=>{
							uni.navigateBack()
						})
					}else{
						this.$showM(info.msg,false)
					}
				}).catch(info => {
					this.$hloading()
				})
			},
			towords(){
				if(this.type == 'forget'){
					if(!this.name){
						this.$showM('请输入会员名称', false)
						return
					}
					uni.navigateTo({
						url:'/pages/login/words?name='+this.name
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/words?type=login'
					})
				}
				
			}
		}
	}
</script>

<style scoped lang="less">
	.codeImg{
		width: 200upx;
		height: 70upx;
	}
	.codeBtn {
		width: 180upx;
		line-height: 70upx;
		text-align: center;
		font-size: 28upx;
		color: #fff;
		border-radius: 10upx;
		background-image: linear-gradient(to right,#ffd171,#ff8959);
	}
	.witem{
		line-height: 40upx;
		padding: 0 20upx;
		border-radius: 20upx;
		color:#2a67fe;
		border: 1px solid #2a67fe;
		margin-right:6upx;
	}
	.inputTitle{
		width: 660upx;
		margin-top: 40upx;
		font-size: 24upx;
		margin-bottom: 10upx;
	}
	.rightLogo{
		width: 40upx;
		height: 40upx;
	}
	.wordBox{
		width: 660upx;
		height: 68upx;
		border-bottom: 1px solid #eee;
	}
	
	.totop1 {
		margin-top: 100upx;
	}

	.totop2 {
		margin-top: 60upx;
	}

	.loginBtn {
		width: 660upx;
		line-height: 80upx;
		text-align: center;
		font-size: 32upx;
		color: #fff;
		border-radius: 10upx;
		background-image: linear-gradient(to right,#ffd171,#ff8959);
	}

	.passwordBox {
		width: 660upx;
		border-bottom: 1px solid #eee;
		height: 70upx;
		font-size: 30upx;
		line-height: 70upx;
	}

	.codepart {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 660upx;
		margin-top: 50upx;
	}

	.codeBtn {
		width: 200upx;
		line-height: 70upx;
		text-align: center;
		font-size: 28upx;
		color: #fff;
		border-radius: 10upx;
	}

	.mibileBox {
		width: 400upx;
		border-bottom: 1px solid #eee;
		height: 70upx;
		display: flex;
		align-items: center;
		color: #999;
		font-size: 30upx;
	}

	.mibileBox image {
		width: 12upx;
		height: 16upx;
		margin: 10upx;
	}

	.mibileBox input {
		font-size: 28upx;
		color: #000;
		padding: 10upx;
	}

	.loginTitle {
		line-height: 100upx;
		width: 100%;
		text-align: center;
		font-size: 34upx;
		font-weight: bold;
		padding-top: var(--status-bar-height);
	}

	.loginTitle image {
		width: 60upx;
		height: 60upx;
		position: absolute;
		top: 20upx;
		left: 20upx;
		margin-top: var(--status-bar-height);
	}

	.welcomeLogin {
		width: 660upx;
		font-size: 34upx;
		font-weight: bold;
	}
	input{
		font-size: 28upx;
	}
	page{
		background: #fff;
		font-size: 28upx;
	}
</style>
